<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="techSupportPanelTemplate.xhtml">

    <ui:define name="contentTechSupport">

        <br/>
        <br/>
        <br/>
        <p:tabView>
            <p:tab title="Available For Installation">
                <h1>Install Devices</h1>
                Choose the device and click "Install" button below to confirm device installation.
                <h:form prependId="false">
                    <p:dataTable id="table" var="device" value="#{listDevicesForInstallation.listDevicesForInstallation}"
                                 paginator="true" rows="10"
                            selection="#{installDevice.arrayDeviceToInstall}" dynamic="true">
                            <!--selectionMode="single"-->
                            <!--dynamic="true">-->
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Id" />
                                </f:facet>
                                <h:outputText value="#{device.id}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Name" />
                                </f:facet>
                                <h:outputText value="#{device.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                  <h:outputText value="Type" />
                                </f:facet>
                                <h:outputText value="#{device.model.modelType.type}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                  <h:outputText value="Model" />
                                </f:facet>
                                <h:outputText value="#{device.model.type}" />
                        </p:column>

                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Country" />
                                </f:facet>
                                <h:outputText value="#{device.location.country.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="City" />
                                </f:facet>
                                <h:outputText value="#{device.location.city.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Str." />
                                </f:facet>
                                <h:outputText value="#{device.location.street.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Build." />
                                </f:facet>
                                <h:outputText value="#{device.location.building.name}" />
                        </p:column>
                    <p:column selectionMode="multiple"/>

                    </p:dataTable>

                    <p:commandButton value="Install" update="table" actionListener="#{installDevice.installDevice}">
                        <p:confirmDialog yesLabel="Install" noLabel="Cancel"
                                         message="Install selected device(s)?" header="Confirm"
                                         severity="warn" fixedCenter="true"/>
                    </p:commandButton>


                </h:form>
            </p:tab>
        </p:tabView>
    </ui:define>

</ui:composition>